<template>
  <el-menu default-active="home"
           class="el-menu-vertical-demo"
           @open="handleOpen"
           @close="handleClose"
           :collapse="isCollapse"
           background-color="black"
           text-color="#fff"
           active-text-color="#409eff">

    <div class="container">
      <div class="img-container">
        <img src="../assets/img.png" alt=""/>
      </div>
      <h3 class="h3-title">{{ isCollapse ? '' : '人事管理系统' }}</h3>
    </div>

    <el-menu-item style="margin-top: 5px;" @click="clickMenu(item)" v-for="item in noChildren" :key="item.name"
                  :index="item.name">
      <i :class="item.icon"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>

  </el-menu>
</template>

<script>
export default {
  name: 'CommonAside',
  data() {
    return {
      menuData: [
        {
          path: '/home',
          name: 'home',
          label: '首页',
          icon: 'el-icon-s-home',
          role: ['管理员','普通员工'] // 管理员和普通员工菜单项
        },
        {
          path: '/sign',
          name: 'sign',
          label: '考勤打卡',
          icon: 'el-icon-location-information',
          role: false // 普通员工菜单项
        },
        {
          path: '/schedule',
          name: 'schedule',
          label: '排班管理',
          icon: 'el-icon-date',
          role: true // 管理员菜单项
        },
        {
          path: '/reimbursement',
          name: 'reimbursement',
          label: '补卡申请',
          icon: 'el-icon-edit',
          role: false // 普通员工菜单项
        },
        {
          path: '/leave',
          name: 'leave',
          label: '请假申请',
          icon: 'el-icon-document',
          role: false // 普通员工菜单项
        },
        {
          path: '/overtime',
          name: 'overtime',
          label: '加班申请',
          icon: 'el-icon-timer',
          role: false // 普通员工菜单项
        },
        {
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'el-icon-user',
          role: true // 管理员菜单项
        },
        {
          path: '/attendance',
          name: 'attendance',
          label: '考勤管理',
          icon: 'el-icon-office-building',
          role: true // 管理员菜单项
        },
        {
          path: '/statistics',
          name: 'statistics',
          label: '考勤统计',
          icon: 'el-icon-s-data',
          role: true // 管理员菜单项
        },
        {
          path: '/attendance2',
          name: 'attendance2',
          label: '考勤查看',
          icon: 'el-icon-office-building',
          role: false // 普通员工菜单项
        },
        {
          path: '/meeting',
          name: 'meeting',
          label: '会议管理',
          icon: 'el-icon-phone-outline',
          role: true // 管理员菜单项
        },
        {
          path: '/meeting2',
          name: 'meeting2',
          label: '会议查看',
          icon: 'el-icon-phone-outline',
          role: false // 普通员工菜单项
        },
        {
          path: '/bulletin',
          name: 'bulletin',
          label: '公告管理',
          icon: 'el-icon-message',
          role: true // 管理员菜单项
        },
        {
          path: '/bulletin2',
          name: 'bulletin2',
          label: '公告查看',
          icon: 'el-icon-message',
          role: false // 普通员工菜单项
        },
        {
          path: '/approval',
          name: 'approval',
          label: '审批管理',
          icon: 'el-icon-document',
          role: true // 管理员菜单项
        },
        {
          path: '/salary',
          name: 'salary',
          label: '薪资管理',
          icon: 'el-icon-date',
          role: true // 管理员菜单项
        },
        {
          path: '/recruitment',
          name: 'recruitment',
          label: '招聘管理',
          icon: 'el-icon-data-analysis',
          role: true // 管理员菜单项
        },
        {
          path: '/info',
          name: 'info',
          label: '个人主页查看',
          icon: 'el-icon-user',
          role: false
        },
      ]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //点击菜单
    clickMenu(item) {
      console.log(item)
      //当页面的路由和跳转路由不一致时才允许跳转
      if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))) {
        this.$router.push(item.path)
      }
      this.$store.commit('selectMenu', item)
    },

  },
  computed: {
    // 没有子菜单
    noChildren() {
      const user = JSON.parse(localStorage.getItem('user'));
      console.log(user,'user')
      if (!user || !user.role) return []; // 如果用户信息或角色信息不存在，返回空数组
      return this.menuData.filter(item => !item.children).filter(item => {
        // 如果 role 是一个数组，检查是否包含当前用户的角色
        if (Array.isArray(item.role)) {
          return item.role.includes(user.role);
        }
        // 如果 role 是布尔值，false 表示普通员工可见，true 表示管理员可见
        else if (typeof item.role === 'boolean') {
          return user.role === '管理员' ? item.role : !item.role;
        }
        // 默认情况下，如果 role 未定义，返回 false
        return false;
      })
    },
    isCollapse() {
      // console.log(this.$store.state.tab.isCollapse)
      return this.$store.state.tab.isCollapse
    }
  }
}
</script>
<style lang="less" scoped>
.el-menu-vertical-demo {
  width: 64px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}

/deep/.el-menu-item:hover {
  outline: 0 !important;
  background-color: #263445 !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
}

.el-menu {
  height: 100vh;
  flex: 1; /* 让菜单占据剩余空间 */
  overflow-y: auto; /* 启用垂直滚动条 */

  .container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    .img-container {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 5px;
      margin-top: 5px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .h3-title {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
  }
}
</style>